<template>
  <view>
    <u-navbar :border-bottom="false">
      <view class="search-input"
        ><u-search
          v-model="keyword"
          height="72"
          placeholder="搜索课程和关键字"
          @custom="search"
        ></u-search
      ></view>
    </u-navbar>
    <view class="search-wrapper">
      <view class="search-view">
        <view class="title u-flex">
          <!-- #ifndef MP-WEIXIN -->
          <u-image width="24rpx" height="32rpx" src="@/static/images/search_hot.png"></u-image>
          <!-- #endif -->
          <!-- #ifdef MP-WEIXIN -->
          <u-image width="24rpx" height="32rpx" src="@/static/images/search_hot.png"></u-image>
          <!-- #endif -->
          <text class="name">热门搜索</text>
        </view>
        <view class="list u-flex u-flex-wrap">
          <view class="label" v-for="(item, index) in hotList" :key="index">
            <view class="name" @click="handleHotClick(item)">{{ item }}</view>
          </view>
        </view>
      </view>

      <view class="search-view">
        <view class="title u-flex u-row-between">
          <text class="name">历史搜索</text>
          <text class="empty" @click="handleEmptyHistory">清空</text>
        </view>
        <view class="list u-flex u-flex-wrap">
          <view class="label" v-for="(item, index) in courseSearchHistoryRecordList" :key="index">
            <view class="name" @click="handleHotClick(item)">{{ item }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      keyword: '',
      hotList: [],
    }
  },
  computed: {
    ...mapState({
      courseSearchHistoryRecordList: (state) => state.course.searchHistoryRecord,
    }),
  },
  onLoad() {
    this.$edu.api.getCourseSearchHot().then((res) => {
      const { data } = res
      this.hotList = data
    })
  },
  methods: {
    handleHotClick(val) {
      this.$u.route('pageCourse/course/list', {
        title: val,
      })
      this.addHistory(val)
    },
    search() {
      this.$u.route('pageCourse/course/list', {
        title: this.keyword,
      })
      this.addHistory(this.keyword)
    },
    // 添加搜索历史记录
    addHistory(val) {
      let list = this.courseSearchHistoryRecordList
      let some = list.some((item) => item == val)
      if (val && !some) {
        list.unshift(val)
        this.$store.commit('course/setSearchHistoryRecord', list)
      }
    },
    // 清空历史
    handleEmptyHistory() {
      this.$store.commit('course/setSearchHistoryRecord', [])
    },
  },
}
</script>
<style lang="scss" scoped>
.search-input {
  width: 100%;
  padding-right: 20rpx;
}
.search-wrapper {
  padding: 40rpx 30rpx 0;
  min-height: calc(100vh - 44px);
  background-color: #fff;
  .search-view {
    margin-bottom: 20rpx;
    .title {
      margin-bottom: 33rpx;
      .name {
        font-size: 28rpx;
        font-weight: 500;
        color: $edu-main-color;
      }
      .empty {
        font-size: 28rpx;
        font-weight: 400;
        color: $edu-tips-color;
      }
      .u-image {
        margin-right: 14rpx;
      }
    }
    .list {
      margin: 0 -14rpx;
      .label {
        padding: 0 14rpx;
        margin-bottom: 40rpx;
        .name {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 22rpx;
          height: 64rpx;
          background: #f7f7f7;
          border-radius: 32px;
        }
      }
    }
  }
}
</style>
